<div class="FootderBox">
    <ul class="am-avg-sm-4">
        <li {if $controllername=='index' && $actionname=='index' } class="on" {/if}> <a href="/">
            <p class="img">
                {if $controllername == 'index' && $actionname == 'index'}
                <img src="__CDN__/map/images/CombinedShape_choose.png" alt="首页" />
                {else}
                <img src="__CDN__/map/images/CombinedShape.png" alt="首页" />
                {/if}
            </p>
            <p class="text">首页</p>
            </a>
        </li>
        <li {if $controllername=='shop' && $actionname=='near' } class="on" {/if}> <a href="{:url('shop/near')}">
            <p class="img">
                {if $controllername == 'shop' && $actionname == 'near'}
                <img src="__CDN__/map/images/Shape_choose.png" alt="附近" />
                {else}
                <img src="__CDN__/map/images/Shape.png" alt="附近" />
                {/if}
            </p>
            <p class="text">附近</p>
            </a>
        </li>



        <li {if $controllername=='user' && $actionname=='ordertotail' } class="on" {/if}> <a
            href="{:url('user/ordertotail')}?status=4">
            <p class="img">
                {if $controllername == 'user' && $actionname == 'ordertotail'}
                <img src="__CDN__/map/images/order_choose.png" alt="订单" />
                {else /}
                <img src="__CDN__/map/images/order.png" alt="订单" />
                {/if}
            </p>

            <p class="text">订单</p>
            </a>
        </li>
        <li {if $controllername=='user' && $actionname=='index' } class="on" {/if}> <a href="{:url('user/index')}">
            <p class="img">
                {if $controllername == 'user' && $actionname == 'index'}
                <img src="__CDN__/map/images/user_choose.png" alt="会员" />
                {else /}
                <img src="__CDN__/map/images/user.png" alt="会员" />
                {/if}
            </p>
            <p class="text">会员</p>
            </a>
        </li>
    </ul>
</div>
<style>
    .FootderBox li.on {
        position: relative;
    }

    .FootderBox li.on::after {
        content: "";
        display: block;
        position: absolute;
        top: -0.12rem;
        left: 50%;
        margin-left: -0.7rem;
        width: 1.4rem;
        height: 0.02rem;
        background-color: #FFD203;
    }
</style>


<script>
    document.documentElement.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
            event.preventDefault();
        }
    }, false);

    var lastTouchEnd = 0;
    document.documentElement.addEventListener('touchend', function (event) {
        var now = Date.now();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, false);
</script>